<template>
  <div class="sidebar" :style="'height:'+bodyHeight+'px'">
    <template v-for="item in layoutData">
        <div @click="getFunctional(item)" :key="item.menuId" v-if="item.menuId" class="2222w">
          <el-menu-item
            v-if="!item.list || item.list ==null || item.list.length == 0"
            :index="item.menuId">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </el-menu-item>
        </div>
      <!-- 判断是否有二级路由 -->
      <el-submenu v-if="item.list && item.list.length !== 0" :key="item.menuId" :index="item.menuId ? item.menuId : item.name" >
        <template slot="title">
          <i :class="item.icon"></i>
          <!-- <i class="el-icon-location"></i> -->
          <span>{{item.name}}</span>
        </template>
        <!--递归组件，把遍历的值传回子组件，完成递归调用-->
        <Menu1 :layoutData="item.list" />
      </el-submenu>
    </template>
  </div>
</template>

<script>
// import bus from '../common/bus';
// @ is an alias to /src
export default {
  name: "Menu1",

  data() {
    return {
      collWidth: '',
      bodyHeight: 600
      // collapse: false,
    };
  },
  computed: {
			layoutData() {
			    return this.$store.getters.layoutData;
			},
		},
  methods: {
     getFunctional(item){
      // await this.$store.dispatch({type: 'base/switchPage', menuId: item.id})
      // console.log('当前激活菜单',this.$route.path,item.url)
      if(this.$route.path!==item.url)
      // this.$store.getters.setactivePath
       this.$store.commit('setactivePath',item.url)
      //  console.log('当前激活菜单',this.$store.getters.activePath)
		    this.$router.push(item.url)
	  },
    setstyle(){
				let height = document.documentElement.clientHeight
        let width = document.documentElement.clientWidth
				this.bodyHeight = height
				console.log('height---------------',height,width)
			},
  },
  created(){
    this.setstyle()
    this.collWidth = this.$store.getters.ismOrpc ? 'width:180px': 'width:300px'
  }
  // 		created() {
  // 			// 通过 Event Bus 进行组件间通信，来折叠侧边栏
  // 			bus.$on('collapse', msg => {
  // 				this.collapse = msg;
  // 			})
  // 		}
};
</script>
<style >
.menu_page {
  position: fixed;
  top: 71px;
  left: 0;
  min-height: 100%;
  background-color: #324057;
  z-index: 99;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar{
    overflow: scroll;
    width: 150px;
    background: #e6edf3;
    /* height: 100% !important; */
}

.el-menu {
  border: none;
}

.fa-margin {
  margin-right: 5px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}

.el-menu-vertical-demo {
  width: 80px;
}

.el-submenu .el-menu-item {
  min-width: 150px;
}

.hiddenDropdown,
.hiddenDropname {
  display: none;
}

.el-menu--horizontal .el-menu .el-menu-item{
  background: #1b244d !important;
    width: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
    border-radius: 4px;
    height: 36px;
    color: #dddddd !important;
}
.el-submenu__title{
   background: #e7e7e8 ;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: 5px 0;
}

</style>
